<template>
  <afl-loading v-if="!data.ready" :width="50" :height="50" class="afl-loading" :tip-style="{ fontSize: '16px' }">
    Loading...
  </afl-loading>
  <fullScreenContainer :width="1920"
                       :height="1080"
                       bgc="transparent"
                       :delay="100" v-else>
    <div class="container">
      <!-- 查询条件 -->
      <div class="materiel-toolbar">
        <div class="menu-wrapper">
          <el-menu mode="horizontal" defaultActive="1" class="dg-view-menu">
            <el-menu-item index="1">
              <el-icon>
                <platform/>
              </el-icon>
              {{ $t('wms.materialInventoryInfo') }}
            </el-menu-item>
          </el-menu>
          <div class="menu-right">
            <el-form :inline="true" :model="formData" label-width="100px">
              <el-form-item :label="$t('wms.materialCode')">
                <el-input size="default" :placeholder="$t('wms.pleaseEnter')" v-model="formData.materielCode">
                </el-input>
              </el-form-item>
              <el-form-item :label="$t('wms.materialSpce')">
                <el-input size="default" :placeholder="$t('wms.pleaseEnter')" v-model="formData.materielSpec">
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">
                  <el-icon>
                    <search/>
                  </el-icon>
                  {{ $t('wms.search') }}
                </el-button>
                <el-button type="info" @click="onRest">
                  <el-icon>
                    <RefreshLeft/>
                  </el-icon>
                  {{ $t('wms.rest') }}
                </el-button>
                <el-button type="warning" @click="exportExcel">
                  <el-icon>
                    <Upload/>
                  </el-icon>
                  {{ $t('wms.derive') }}
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="materiel-content">
        <el-table border id="out-table"
                  :data="data.materialData"
                  :fit="true" table-layout="fixed" header-align="center" stripe
                  style="width:100%;height: 97%;"
                  :header-cell-style="{color:'#000',textAlign:'center',borderColor:' #CCC',background:'#f9f9f9'}"
                  :cell-style="{textAlign: 'center'}">
          <el-table-column :label="$t('wms.materialInformations')">
            <el-table-column type="index" width="150" label="序号">
              <template #default="scope">
                 <span class="index_common" v-bind:class="[(data.currentPage - 1) * data.pagesize + scope.$index + 1 === 1 ?
                'index_one' : ((data.currentPage - 1) * data.pagesize + scope.$index + 1 === 2 ? 'index_two' :
                ((data.currentPage - 1) * data.pagesize + scope.$index + 1 === 3 ? 'index_three' : 'index_more'))]">
                     {{ (data.currentPage - 1) * data.pagesize + scope.$index + 1 }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="materialCode" :label="$t('wms.materialCode')" width="120">
              <template #default="scope">
                <el-popover trigger="hover" placement="top" width="260">
                  <el-descriptions class="margin-top" :column="1" size="small" border>
                    <el-descriptions-item>
                      <template #label>
                        <i class="el-icon-user"></i>
                        {{ $t('wms.materialSpce') }}
                      </template>
                      {{ scope.row.specification }}
                    </el-descriptions-item>
                  </el-descriptions>
                  <template v-slot:reference>
                    <div class="name-wrapper">
                      <el-tag size="large" effect="plain">{{ scope.row.materialCode }}
                      </el-tag>
                    </div>
                  </template>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column prop="materialNameEn" :label="$t('wms.materialName')" width="140"/>
            <el-table-column prop="specification" :label="$t('wms.materialSpce')"/>
            <el-table-column prop="unit" :label="$t('wms.unit')" width="80"/>
          </el-table-column>
          <el-table-column :label="$t('wms.setValue')">
            <el-table-column prop="purchasingCycle" :label="$t('mes.purchasingCycle')" width="120"/>
            <el-table-column prop="minimumOrder" :label="$t('wms.minimumPurchase')" width="180"/>
            <el-table-column prop="safetyStock" :label="$t('wms.safetyStockQty')" width="180">
              <template #default="scope">
                <el-tag effect="dark" size="large" :type="scope.row.safetyStock>0?'success': 'danger'"
                        style="width:80px">
                  {{ scope.row.safetyStock }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column :label="$t('wms.real-timeQty')">
            <!-- <el-table-column prop="" label="安全库存周期" width="120"/> -->
            <el-table-column prop="currentQty" :label="$t('wms.currentStocks')" width="200">
              <template #default="scope">
                <el-tag effect="dark" size="large" type="warning" style="width:80px">
                  {{ scope.row.currentQty }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="wayQty" :label="$t('wms.quantityIn')" width="160"></el-table-column>
            <el-table-column prop="arrivalQty" :label="$t('wms.quantityArrived')" width="180">
              <template #default="scope">
                <el-tag effect="dark" :type="scope.row.arrivalQty > 0 ? 'success': 'danger'" size="large"
                        style="width:80px">
                  {{ scope.row.arrivalQty }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column :label="$t('wms.materialRequirement')" width="200">
              <template #default="scope">
                <div class="name-wrapper">
                  <el-tag style="width:100px;font-size:14px;font-weight: 600;" size="large" effect="dark"
                          :type="(scope.row.safetyStock - scope.row.currentQty - scope.row.wayQty) > 0 ? '' : 'danger'">
                    {{
                      (scope.row.safetyStock - scope.row.currentQty - scope.row.wayQty - scope.row.arrivalQty) > 0 ? (scope.row.safetyStock - scope.row.currentQty - scope.row.wayQty - scope.row.arrivalQty).toFixed(2) : 0
                    }}
                  </el-tag>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
        <div class="demo-pagination-block">
          <el-pagination :currentPage="data.currentPage" :page-size="data.pagesize" :page-sizes="[20, 50, 80]"
                         :small="small" :disabled="disabled" :background="background"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="data.total" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
        </div>
      </div>
    </div>
  </fullScreenContainer>
</template>

<script setup>
// 引入组件，进去页面显示加载
import aflLoading from '@/components/loading'
import fullScreenContainer from '@/components/fullScreenContainer'
import { onMounted, reactive, watch, ref } from 'vue'
import { getMaterialSafeStock, materialExportExcel } from '@/api/mesApi'
import useI18n from '@/hooks/language'
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'
import { ElMessage } from 'element-plus'
import ScaleBox from 'vue3-scale-box'
import config from '@/config/index'

const { t } = useI18n()

const data = reactive({
  ready: false,
  materialData: '',
  currentPage: 1, // 当前页
  pagesize: 20, // 每页显示多少条
  total: 0 // 总的多少数据
})

const formData = reactive({
  materielCode: '',
  materielSpec: ''
})

onMounted(() => {
  data.ready = true
  getMaterial()
  setTime()
})
// 定时执行
const setTime = () => {
  setInterval(async () => {
    await getMaterial()
  }, 6000)
}
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const getMaterial = () => {
  getMaterialSafeStock({
    page: data.currentPage,
    rows: data.pagesize,
    materialCode: formData.materielCode,
    specification: formData.materielSpec
  }).then(function (res) {
    // console.log(res)
    data.materialData = res.rows
    data.total = res.total
  })
}
// 表格分页
const handleSizeChange = (val) => {
  data.pagesize = val
  getMaterial()
}
const handleCurrentChange = (val) => {
  data.currentPage = val
  getMaterial()
}

const onSubmit = () => {
  getMaterial()
}

const onRest = () => {
  formData.materielSpec = ''
  formData.materielCode = ''
  getMaterial()
}
const exportExcel = () => {
  window.location.href = config.baseURL + '/mes/basMaterial/notoken/exportExcel'
}

// 导出Excel
// const exportExcel = () => {
//   const xlsxParams = { row: true }
//   // 根据表格导出  可以根据json数据导出 json_to_sheet
//   const wb = XLSX.utils.table_to_book(
//     document.querySelector('#out-table'),
//     xlsxParams
//   )
//   // 写入
//   const wbout = XLSX.write(wb, {
//     bookType: 'xlsx',
//     bookSST: true,
//     type: 'array'
//   })
//
//   try {
//     FileSaver.saveAs(
//       new Blob([wbout], { type: 'application/octet-stream' }),
//       '物料库存信息.xlsx'
//     )
//   } catch (e) {
//     if (typeof consloe !== 'undefined') {
//       ElMessage.error({
//         message: e.wbout,
//         type: 'error'
//       })
//     }
//   }
//   return wbout
// }
</script>

<style scoped lang="scss">
@forward "index";

body,
#app,
#dv-full-screen-container {
  background-color: #EDF2F9
}
</style>
